<!DOCTYPE html>
<html>
<head>
<title>日程</title>
<meta name="Keywords" content="关键字">
<meta name="Description" content="内容">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
<meta content="telephone=no, address=no" name="format-detection">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="no-cache" http-equiv="pragma">
<meta content="0" http-equiv="expires">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/home/css/style.css" media="all"> 
<link rel="stylesheet" type="text/css" href="__PUBLIC__/home/css/simple-calendar.css">
<script type="text/javascript" src="__PUBLIC__/home/js/jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="__PUBLIC__/home/js/size.js"></script>
</head>
<body>
<div class="inner">
    <div class="innertop"><a href="#" class="ico-a01"> </a><a href="#" class="ico-a02"></a></div>
    <div id='calendar' class="sc-calendar">
        <div class="sc-header">
            <div class="sc-title">
                <div class="year"><span class="sc-select-year" name=""></span>年</div>
                <div class="month">
                    <div class="arrow sc-mleft"></div>
                    <div class="monthdiv">
                        <span class="sc-select-month" name=""></span>
                    </div>
                    <div class="arrow sc-mright"></div>
                </div>
            </div>
            <div class="sc-week"></div> 
        </div>
        <div class="sc-body">
            <div class="sc-days"></div>
        </div>
    </div>
    <div class="adda"><a href="{:U('showTask')}">+</a></div>
    <!-- <div class="nowdate">2018年11月13日 农历十月初六</div> -->
    <div class="nowdate"></div>
    <div class="announcement">
        <ul class="matter">
            <if condition="empty($data) neq true">
            <foreach name="data" item="vo">
            <li class="announceItem">
                <if condition="$role eq 1 and $vo['status'] eq 2">
                    <a href="{:U('editTask')}?id={$vo['id']}">
                <else/>
                    <a href="{:U('showTaskDetail')}?id={$vo['id']}">
                </if>
                <!-- <a href="{:U(showTaskDetail)}?id={$vo['id']}"> -->
                    <div class="ico"></div>
                    <div class="txt">
                        <h3>{$vo['name']}</h3>
                        <div class="ms">{$vo['end_time'] | date='Y-m-d H:i',###}  截止</div>
                    </div>
                    <div class="stat red">
                    <if condition="$vo[status] eq 1">    
                    已完成
                    <elseif condition="$vo[status] eq 2"/>
                    未完成
                    <else />
                    未知状态
                    </if>
                    </div>
                </a>
            </li>
            </foreach>
            <else />
            <li class="announceItem"><div><p class="announceContent">当前日期暂无活动</p></div></li>
            </if>
        </ul>
    </div>
</div>

<include file="Public/footer" />
<script type="text/javascript" src="__PUBLIC__/home/js/simple-calendar.js"></script>
<script type="text/javascript" src="__PUBLIC__/home/js/hammer-2.0.8-min.js"></script>
<script type="text/javascript">
    var myCalendar = new SimpleCalendar('#calendar');
    $(function(){
        var monthCH = $('.sc-select-month').text();
        $(".sc-mleft").click(function(){
            myCalendar.subMonth();
            var year = $('.sc-select-year').text();
            var monthCH = $('.sc-select-month').text();
            var month = SimpleCalendar.prototype.languageData.months_CH.indexOf(monthCH)+1;
            dateClass(-1,year,month);
       })
        $(".sc-mright").click(function(){
            myCalendar.addMonth();
            var year = $('.sc-select-year').text();
            var monthCH = $('.sc-select-month').text();
            var month = SimpleCalendar.prototype.languageData.months_CH.indexOf(monthCH)+1;
            dateClass(1,year,month);
        })
    });

    //滑动切换
    var myElement = document.getElementById('calendar');
    var hammer = new Hammer(myElement);
    hammer.on("swipeleft", function (ev) {
        myCalendar.addMonth();
        var year = $('.sc-select-year').text();
        var monthCH = $('.sc-select-month').text();
        var month = SimpleCalendar.prototype.languageData.months_CH.indexOf(monthCH)+1;
        dateClass(-1,year,month);
    });


    hammer.on("swiperight", function (ev) {
        myCalendar.subMonth();
        var year = $('.sc-select-year').text();
        var monthCH = $('.sc-select-month').text();
        var month = SimpleCalendar.prototype.languageData.months_CH.indexOf(monthCH)+1;
        dateClass(1,year,month);
    });    

    dateClass(0);

    //有标记的日期点击事件
    $('#calendar').on("click", '.sc-selected', function() {
        announceList($(this));
    });

    //初始化当前日前为当天
    var myDate = new Date();
    $('.nowdate').text($('.sc-select-year').text()+'-'+(myDate.getMonth()+1)+'-'+myDate.getDate());
    
    //获取有日程的日期加样式
    function dateClass(m,year,month){
        $.ajax({
            url :  "{:U('hasTaskDate')}",
            type : 'post',
            data : {
                'm':m,
                'year':year,
                'month':month
            },
            dataType : 'json',
            success : function (data, status) {
                $('.sc-month').each(function(index,element){
                    var num = element.querySelector('.day').innerText;
                    if(data.indexOf(num)>-1){
                        element.querySelector('.mark').classList.remove('sc-mark-hide');
                        element.querySelector('.mark').classList.add('sc-mark-show');
                    }
                });            
            },
            fail : function (err, status) {
                console.log(err)
            }
        })
    }

    //显示选择日期当天的活动
    function announceList(v){
        var year = $('.sc-select-year').text();
        var monthCH = $('.sc-select-month').text();
        var day = v.children()[1].innerText;
        var month = SimpleCalendar.prototype.languageData.months_CH.indexOf(monthCH)+1;
        var date = year + '-' + month + '-' + day;
        var matterHtml=''
        $('.nowdate').text(date);
        //获取当前选择日期的活动
        var _date;
        $.ajax({
            url :  "{:U('nowDateTaskList')}",
            type : 'post',
            data : {
                'date' : date
            },
            dataType : 'json',
            success : function (data, status) {
                if(data.status){
                    console.log(data);
                    var content = data['info'];
                    var matterHtml='';
                    var role = {$role};
                    for(var i=0;i<content.length;i++){
                        //console.log(content[i]);
                        var str = '';
                        var bgstyle = '';
                        if(content[i]['status'] ==1){
                            str = '已完成';
                            bgstyle = 'gray';
                        }else if(content[i]['status'] ==2){
                            str = '未完成'; 
                            bgstyle = 'red'
                        }else{
                            str = '未知状态'; 
                            bgstyle = 'gray'
                        }

                        if(content[i]['status'] == 2 && role == 1){
                            matterHtml +='<li class="announceItem"><a href="{:U(editTask)}?id='+content[i]['id']+'"><div class="ico"></div><div class="txt"><h3>'+content[i]['name']+'</h3><div class="ms">'+content[i]['end_time']+'  截止</div></div><div class="stat '+bgstyle+'">'+str+'</div></a></li>'; 
                        }else{
                            matterHtml +='<li class="announceItem"><a href="{:U(showTaskDetail)}?id='+content[i]['id']+'"><div class="ico"></div><div class="txt"><h3>'+content[i]['name']+'</h3><div class="ms">'+content[i]['end_time']+'  截止</div></div><div class="stat '+bgstyle+'">'+str+'</div></a></li>'; 

                        }

                        
                    }
                    $('.matter').html(matterHtml);
                }else{
                    var matterHtml=''
                    matterHtml +='<li class="announceItem"><div><p class="announceContent">当前日期暂无活动</p></div></li>';
                    $('.matter').html(matterHtml);
                }
            },
            fail : function (err, status) {
                console.log(err)
            }
        })
    }
        
</script>
</body>
</html>